<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>
	<style type="text/css">
		.bf::before {
			content: "";
			display: none;
		}

		.bf::after {
			content: "";
			display: none;
		}

		.bf {
			color: rgba(0, 0, 0, .5);
			text-align: right;
		}

		input {
			text-align: right;
			margin-right: 20px;
		}

		.mui-content {
			font-size: 14px;
		}
	</style>

	<body>
		<!-- 标题-start -->
		<header class="mui-bar mui-bar-nav" style="background-color: red;box-shadow: none;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
			<h1 class="mui-title" style="color: white;">填写建议</h1>
		</header>
		<!-- 标题-end -->
		<div class="mui-content">
			<label
				style="margin-left: 10px;margin-top: 5px;display: block;margin-left: 0; margin-bottom: 3px;">建议</label>
			<ul class="mui-table-view cc">
				<li class="mui-table-view-cell" style="display: flex;align-items: center;">
					<label style="flex: 2;">标题</label>
					<input style="flex: 2;border: none;margin: 0;padding: 0,0,0,10px;" type="text"
						class="mui-input-clear" placeholder="请输入">
				</li>
				<li class="mui-table-view-cell" style="display: flex;align-items: center;">
					<label style="flex: 2; ">建议类型</label>
					<ul class="mui-table-view bf" style="text-align: right; flex: 2;rgb(0,0,0,0.5);">
						<li class="mui-table-view-cell mui-collapse">
							<a class="" href="#">建议类型</a>
							<div class="mui-collapse-content">
								<p>面板1子内容</p>
							</div>
							<div class="mui-collapse-content">
								<p>面板1子内容</p>
							</div>
							<div class="mui-collapse-content">
								<p>面板1子内容</p>
							</div>
						</li>
					</ul>
				</li>
				<li class="mui-table-view-cell" style="display: flex;align-items: center;">
					<label style="flex: 2;">建议时间</label>
					<input style="flex: 2;border: none;margin: 0;padding: 0,0,0,10px;" type="text"
						class="mui-input-clear" placeholder="请输入">
				</li>
				<li class="mui-table-view-cell" style="display: flex;align-items: center;">
					<label style="flex: 2;">建议内容</label>
					<input style="flex: 2;border: none;margin: 0;padding: 0,0,0,10px;" type="text"
						class="mui-input-clear" placeholder="请输入">
				</li>
				<li class="mui-table-view-cell" style="display: flex;flex-direction: column;">
					<p>上传图片</p>
					<div style="display: flex;flex-wrap: nowrap;" id="img">
						<label
							style=" font-size: 12px;color: rgba(0,0,0,.5);">上传格式：图片（支持jpg、png格式，每张图片大小不超过10M，最多可上传20张）、PDF（文件不超过20M，最多上传1份）</label>
						<img src="images/jianyan/shangchuan.png" width="50" onclick="shangchuan()"><img
							src="images/jianyan/shangchuan.png" width="50" onclick="shangchuan()">
				</li>
			</ul>
			<!-- 提交-start -->
			<div style="position: fixed;bottom: 0;padding: 0 5%;margin: 0;">
				<button type="button" class="mui-btn mui-btn-blue mui-btn-block" onclick="tijiao()"
					style="background-color: red;width: 90vw;border: none;height: 35px;font-size: 16px;line-height: 7px;margin: 0;">填写建议</button>
			</div>
			<!-- 提交-end -->

		</div>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
			let imgq = ""

			function shangchuan() {
				// document.querySelector("#img").innerHTML=""
				document.querySelector("#img").append(document.createElement("img"))
				plus.gallery.pick(function(Path) {
					document.querySelector("#img img").src = Path
					imgq = Path
					document.querySelector("#img img").setAttribute("width", "50")
				}, function(e) {

				}, {
					filter: "image"
				})
			}

			function tijiao() {
				let src1 = document.querySelector("#img img").src
				plus.storage.setItem("img", src1)
				localStorage.setItem("img",true)
				window.location.href = "index.html"
			}

			mui.plusReady(function() {
				if (plus.storage.getItem("img")) {

					document.querySelector("body").innerHTML = `
			    	已上传:<br/>
			    	<img src='${plus.storage.getItem("img")}' >
					
					
					<div style="position: fixed;bottom: 0;padding: 0 5%;margin: 0;">
						<button type="button" class="mui-btn mui-btn-blue mui-btn-block"
					id ='qc' onclick="qc()" style="background-color: red;width: 90vw;border: none;height: 35px;font-size: 16px;line-height: 7px;margin: 0;">清除上传</button>
					</div>
			    	`
				}
			})

			function qc() {
				plus.storage.removeItem("img")
				window.location.href = "index.html"
			}
		</script>
	</body>

</html>
